<template>
  <div class="quality-task-table-container">
    <table class="quality-task-table">
      <thead>
        <tr style="height: 26px;">
          <th class="size">质量任务名称</th>
          <th class="size">数据表名称</th>
          <th class="size">系统名</th>
          <th class="size">业务处室名称</th>
          <th class="size">表质量合格率</th>
        </tr>
      </thead>
      <tbody>
        <tr style="height: 25px;" v-for="(row, index) in tableData" :key="index">
          <td class="size">{{ row.tableName }}</td>
          <td class="size">{{ row.dataTableName||'--' }}</td>
          <td class="size">{{ row.systemName||'--' }}</td>
          <td class="size">{{ row.businessOfficeName||'--' }}</td>
          <td class="size">{{ row.rw }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  GETlistDwSuppObjectType1
} from "@/api/index";

onMounted(() => {
  awGETlistDwSuppObjectType1()
})
//数据合格率明细
const awGETlistDwSuppObjectType1 =async () => {
  await GETlistDwSuppObjectType1().then((res) => {
    tableData.value=res.data
  })
}
// 定义默认数据
const defaultTableData = [
  {
    tableName: "已交付房屋面积",
    dataTableName: "市场处",
    systemName: "数字住房",
    businessOfficeName: "市场处",
    rw: "90%",
  },
  {
    tableName: "已交付房屋面积",
    dataTableName: "市场处",
    systemName: "数字住房",
    businessOfficeName: "市场处",
    rw: "90%",
  },
  {
    tableName: "已交付房屋面积",
    dataTableName: "市场处",
    systemName: "数字住房",
    businessOfficeName: "市场处",
    rw: "90%",
  },
  {
    tableName: "已交付房屋面积",
    dataTableName: "市场处",
    systemName: "数字住房",
    businessOfficeName: "市场处",
    rw: "90%",
  },
  {
    tableName: "已交付房屋面积",
    dataTableName: "市场处",
    systemName: "数字住房",
    businessOfficeName: "市场处",
    rw: "90%",
  },
  {
    tableName: "已交付房屋面积",
    dataTableName: "市场处",
    systemName: "数字住房",
    businessOfficeName: "市场处",
    rw: "90%",
  },
  {
    tableName: "已交付房屋面积",
    dataTableName: "市场处",
    systemName: "数字住房",
    businessOfficeName: "市场处",
    rw: "90%",
  },
  {
    tableName: "已交付房屋面积",
    dataTableName: "市场处",
    systemName: "数字住房",
    businessOfficeName: "市场处",
    rw: "90%",
  },
  {
    tableName: "已交付房屋面积",
    dataTableName: "市场处",
    systemName: "数字住房",
    businessOfficeName: "市场处",
    rw: "90%",
  },
];

// 定义响应式数据
const tableData = ref(defaultTableData);

// 定义滚动相关逻辑（这里简单示例，实际可按需优化）
const scrollTable = (direction) => {
  const table = document.querySelector(".quality-task-table");
  if (table) {
    if (direction === "up") {
      table.scrollTop -= 50;
    } else if (direction === "down") {
      table.scrollTop += 50;
    }
  }
};
</script>

<style scoped>
.size{
  font-size: 10px;
}
table thead tr {
  /* display: block; */
  table-layout: fixed;
  /* height: 26px; */
}
th {
  padding: 0 !important;

}
td {
  padding: 0 !important;

}
.quality-task-table-container {
  background-color: rgb(15,53,115);
  color: #91caf6;
  overflow-y: auto;
  height: 225px; /* 可按需调整高度 */
  
}
.quality-task-table-container::-webkit-scrollbar {
  display: none;
}

.quality-task-table {
  width: 100%;
  border-collapse: collapse;
}

.quality-task-table th,
.quality-task-table td {
  padding: 10px;
  text-align: left;
}
.quality-task-table tr:nth-child(odd){
  background-color: rgb(10,43,94);
}
.quality-task-table tr:nth-child(even) {
  background-color: rgb(14,51,112);
}
</style>
